<template>
	<div class="relative text-sm w-full text-white" @click="handleClick">
		<router-link :to="handleRouterLink(item)" class="w-full">
			<base-image
				class="rounded-lg w-full h-full object-cover cursor-not-allowed align-bottom"
				:class="item.gameName || item.gameKey ? 'cursor-pointer' : ''"
				:src="formatGameIcon(item)"
				default="placeholder-higher.svg"
				@onload="loaded = true"
				:type="'network'"></base-image>
		</router-link>

		<!-- <template v-if="loaded">
			<div
				v-if="type === 'slots'"
				class="absolute bottom-[13%] w-full flex justify-center items-center">
				<span class="rounded-full px-2 bg-[rgba(0,0,0,.6)]">RTP&nbsp;{{ item.rtp }}</span>
			</div>
			<div class="absolute bottom-[3.5%] flex w-full justify-center items-center">
				<span>{{ item.provider || item.providerName }}</span>
			</div>
			<img
				v-if="item.tag === 'new'"
				class="w-[16px] h-[16px] absolute top-3 left-3"
				:src="newIcon" />
			<base-icon
				class="text-[22px] absolute top-2 right-2"
				:name="iconName"
				@click.stop="handleCollect" />
		</template> -->
	</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { BaseImage } from '@/components/base'
// import newIcon from '@/assets/img/slots/new.svg'
import { showError } from '@/utils'
import { useRouter } from 'vue-router'
// import { useDialog } from '@/hooks'
import { launchUrl } from '@/api/games'
import { useAppStore, useWalletStore, useAccountStore } from '@/store'
import { getItem, setItem } from '@/utils'
import { THIRD_GAME } from '@/constants'
import { AccountShowType } from '@/types'
import { genOriginalRoute } from '@/components/slots/utils.ts'
const walletStore = useWalletStore()
const appStore = useAppStore()
const accountStore = useAccountStore()
const loaded = ref(false)
const props = defineProps({
	item: {
		type: Object as any,
		default: () => {}
	},
	width: {
		type: Number,
		default: 0
	},
	type: {
		type: String,
		default: 'slots'
	},
	selectType: {
		type: String,
		default: ''
	}
})

const router = useRouter()
// const dialog = useDialog()
// const accountStore = useAccountStore()
// const slotStore = useSlotStore()
// const casinoStore = useCasinoStore()

// const iconName = computed(() => {
// 	if (props.item?.collectState || props.item?.favoriteState) {
// 		return 'love2'
// 	}
// 	return 'love'
// })

// const handleCollect = async () => {
// 	if (accountStore.isLogin) {
// 		if (props.type === 'casino') {
// 			const params = {
// 				eid: props.item.eid,
// 				action: props.item.favoriteState,
// 				isFavorite: props.selectType === 'favorite'
// 			}
// 			if (props.item.favoriteState) {
// 				dialog.warning({
// 					titleT: 'slotsall.cancelCollect',
// 					contentT: 'slotsall.collectConfirm',
// 					confirmTextT: 'action.confirm',
// 					cancelTextT: 'action.cancel',
// 					confirmFn: async () => {
// 						casinoStore.cancelCollectGame(params)
// 					},
// 					cancelFn: () => {
// 						console.log('cancel')
// 					}
// 				})
// 			} else {
// 				casinoStore.collectGame(params)
// 			}
// 		} else {
// 			const params = {
// 				id: props.item.id,
// 				gameId: props.item.gameId,
// 				cancelFlag: props.item.collectState,
// 				isFavorite: props.selectType === 'favorite'
// 			}
// 			if (props.item.collectState) {
// 				dialog.warning({
// 					titleT: 'slotsall.cancelCollect',
// 					contentT: 'slotsall.collectConfirm',
// 					confirmTextT: 'action.confirm',
// 					cancelTextT: 'action.cancel',
// 					confirmFn: async () => {
// 						slotStore.cancelCollectGame(params)
// 					},
// 					cancelFn: () => {
// 						console.log('cancel')
// 					}
// 				})
// 			} else {
// 				slotStore.collectGame(params)
// 			}
// 		}
// 	} else {
// 		accountStore.showLogin()
// 	}
// }
// 点击游戏列表的操作
const doGame = async (item: any) => {
	try {
		if (accountStore.token && walletStore.balanceCur?.currency) {
			console.log('当前游戏item', item)
			const { data } = await launchUrl({
				gameCode: item.gameCode,
				walletCurrency: walletStore.balanceCur?.currency,

				gameCurrency: walletStore.balanceCur?.currency || 'USD',
				lang: appStore.lang,
				device: 'DESKTOP',
				funMode: item.funMode,
				referrer: location.href
			})
			const urlObj = new URL(data.game_url)

			const params = Object.fromEntries(urlObj.searchParams.entries())

			setItem(THIRD_GAME, params)

			router.push({
				name: getItem(THIRD_GAME).game_code,
				params: { id: item.slug || item.id, locale: appStore.lang }
			})
		} else {
			accountStore.showAccount(AccountShowType.login)
		}
	} catch (error: any) {
		showError(error)
	}
}
const handleClick = () => {
	console.log('当前游戏item1', props.item)
	if (!(props.item.fullGameName || props.item.gameKey)) return
	if (props.type === 'casino') {
		router.push({
			name: 'CasinoDetail',
			params: {
				id: props.item.fullGameName
			}
		})
	} else if (props.type === 'slots') {
		router.push({
			name: 'SlotsDetail',
			params: {
				id: props.item.gameKey
			}
		})
	} else if (props.type === '2up') {
		doGame(props.item)
	} else {
		router.push({
			name: props.item.gameType
			// name: props.item.id
		})
	}
}
const handleRouterLink = (item: any) => {
	if (item.category === 3) {
		//original
		return genOriginalRoute(item)
	} else {
		return { name: 'casinoDetail', params: { id: item.slug || item.id, locale: appStore.lang } }
	}
}
const formatGameIcon = (item: any) => {
	let lang = appStore.lang

	let formatLang = 'en_US'
	if (lang === 'en') {
		formatLang = 'en_US'
	} else if (lang === 'zh') {
		formatLang = 'zh_CN'
	} else if (lang === 'zhTW') {
		formatLang = 'zh_TW'
	}

	let icon
	if (item.gameEntranceIcon) {
		icon = item.gameEntranceIcon[formatLang] || item.gameIcon
	} else {
		icon = item.gameIcon
	}
	return icon
}
</script>
